<template>
	<view class="body">
		<!-- 新增优惠券的 -->
		<view class="add_card">
			<view class="">新增优惠券</view>
			<view @click="addCard">+新增</view>
		</view>
		<!-- 优惠券类型的 -->
		<view class="tab">
			<view :class="queryParam.status!=0?'active':''" @click="onClickItem(0)">进行中</view>
			<view :class="queryParam.status!=1?'active':''" @click="onClickItem(1)">已结束</view>
		</view>
		<!-- 进行中优惠券的 -->
		<view class="zero_data" v-if="total==0">
			暂无数据
		</view>
		<view class="coupon_list" v-if="list.size!=0">
			<view class="coupon" :style="backgroundColor" v-for="item in list" :key="item.id">
				<view class="coupon_condition" v-show="item.type=='满减券'">
					<view class="">满{{item.triggerMoney}}减</view>
					<view class="">{{item.preferentialMoney}}</view>
				</view>
				<view class="coupon_condition" v-show="item.type=='折扣券'">
					<view class="">折扣券</view>
					<view class="">{{item.discount}}</view>
				</view>
				<view class="coupon_show">
					<view class="">优惠券名称：{{item.name}}</view>
					<view class="">有效期：{{item.start}}-{{item.end}}</view>
					<view class="">每人限领{{item.size}}张</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParam: {
					pageNum: 1,
					pageSize: 10,
					mid: getApp().globalData.shop.id,
					status: 0,
				},
				list: [],
				total: 0,
				requestFlag: false,
				backgroundColor: 'background-color:#0D7AF7'
			}
		},
		methods: {
			//tab发生改变
			onClickItem(index) {
				this.list = [];
				if (index == 0) {
					this.backgroundColor = 'background-color:#0D7AF7'
				} else {
					this.backgroundColor = 'background-color:#89B0EC'
				}
				this.queryParam.status = index;
				this.queryParam.pageNum = 1;
				this.queryParam.pageSize = 10;
				this.list = [];
				this.getList();
			},
			//新增优惠券
			addCard() {
				uni.navigateTo({
					url: '/pages/card/faCcoupon/faCcoupon'
				})
			},
			//获取优惠券
			getList() {
				this.requestFlag = true;
				uni.request({
					url: 'http://localhost:7000/business/couponReal/list',
					data: this.queryParam,
					method: 'GET',
					header: {
						authorization: getApp().globalData.token
					},
					success: (resp) => {
						if (resp.data.code == 200) {
							console.log(resp);
							this.list = [...this.list, ...resp.data.rows];
							this.total = resp.data.total;
							this.requestFlag = false;
						} else {
							uni.showToast({
								title: '服务器繁忙',
								icon: 'none'
							})
						}
					},
					fail: (resp) => {}
				})
			},
		},
		onLoad() {

		},
		onShow() {
			this.queryParam.pageNum = 1;
			this.queryParam.pageSize = 10;
			this.list = [];
			this.getList()
		},
		onReachBottom() {
			console.log(this.requestFlag);
			if (this.requestFlag) {
				return;
			}
			if (this.queryParam.pageNum * 10 >= this.total) {
				uni.showToast({
					title: '没有更多数据了',
					icon: "none"
				});
				return;
			}
			this.queryParam.pageNum = this.queryParam.pageNum + 1;
			console.log(this.queryParam.pageNum);
			this.queryParam.pageNum = 1;
			this.queryParam.pageSize = 10;
			this.list = [];
			this.getList();
			uni.showToast({
				title: '正在加载中....',
				icon: "none"
			})
		},
	}
</script>

<style>
	.body {
		height: 100vh;
		background-color: white;
	}

	/* 新增优惠券 */
	.add_card {
		height: 166rpx;
		font-size: 36rpx;
		border-top: 2rpx solid #BBBBBB;
		border-bottom: 2rpx solid #BBBBBB;
		display: flex;
		justify-content: space-around;
	}

	.add_card>view:nth-child(1) {
		color: #0D7AF7;
		font-size: 36rpx;
		line-height: 166rpx;
	}

	.add_card>view:nth-child(2) {
		width: 234rpx;
		height: 68rpx;
		color: #101010;
		font-size: 36rpx;
		line-height: 68rpx;
		text-align: center;
		margin-top: 52rpx;
		border: 2rpx solid rgba(187, 187, 187, 1);
		border-radius: 8rpx;
	}

	/* 优惠券类型 */
	.tab {
		margin-top: 80rpx;
		display: flex;
		justify-content: space-around;
	}

	.tab>view {
		width: 188rpx;
		height: 64rpx;
		color: white;
		font-size: 28rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 26rpx;
		background-color: #0D7AF7;
	}

	/* 优惠券list */
	.zero_data {
		height: 380rpx;
		color: #666;
		font-size: 32rpx;
		text-align: center;
		line-height: 380rpx;
	}

	.coupon_list {
		margin-top: 30rpx;
	}

	.coupon {
		width: 692rpx;
		height: 202rpx;
		color: white;
		border-radius: 16rpx;
		margin: 0 auto 30rpx;
	}

	.coupon_condition {
		padding-left: 50rpx;
		float: left;
	}

	.coupon_condition>view:nth-child(1) {
		height: 40rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.coupon_condition>view:nth-child(2) {
		height: 134rpx;
		font-size: 96rpx;
		line-height: 134rpx;
		text-align: center;
	}

	.coupon_show {
		font-size: 24rpx;
		line-height: 45rpx;
		padding-left: 70rpx;
		margin-top: 30rpx;
		border-left: 4rpx solid white;
		float: right;
		padding-right: 50rpx;
	}

	.coupon_show>view:nth-child(1),
	.coupon_show>view:nth-child(2) {
		color: rgba(255, 255, 255, 0.55);
	}

	.active {
		color: #fff !important;
		background-color: #89B0EC !important;
	}
</style>